/* 
思路：1.实现查询和渲染

    2. 实现学员的添加
        1 弹出模态框
        2 省份的添加
        3 学员的添加

    3 编辑学员
        1 给 编辑 按钮绑定点击事件  
          1 弹出编辑-模态框 
        2 让待编辑的数据  显示在 模态框中 
        3 性别单选框 和 贯籍下拉框 需特殊处理

    4 给编辑表单绑定 提交事件 
      1 阻止默认行为
      2 快速获取编辑表单中的值
      3 拼接成参数发送给后端 完成编辑
    5 成功 
      1 提示用户 编辑成功
      2 重置编辑表单
      3 关闭模态框
      4 发送请求获取最新的数据 

*/

// 获取元素
const tbody = document.querySelector('tbody');





// 获取 student 的数据 并且实现渲染
getStudentList();

// 添加学员
// 添加学员   表单 籍贯下拉列表初始化(封装函数)
initSelect("#addModal");
// 添加学员 获取表单数据 实现添加
document.querySelector('.add-form').addEventListener("submit", function (e) {
    e.preventDefault();
    // 快速获取表单数据
    const data = $(this).serialize();
    axios.post("/student/add", data).then(result => {
        console.log(result);
        if (result.data.code === 0) {
            // 重置表单
            this.reset();
            // 关闭模态框
            $('#addModal').modal('hide');
            // 获取最新的数据
            getStudentList();
        }
    });
});

// 编辑学员
// 编辑学员   表单 籍贯下拉列表初始化
initSelect('#updateModal');
// 给tbody标签绑定点击事件
// 编辑 和 删除 点击
tbody.addEventListener('click', function (e) {
    const dom = e.target;
    if (dom.classList.contains('btn-primary')) {
        // 弹出 编辑 模态框
        $('#updateModal').modal('show');
        // 获取id 发送请求
        const id = dom.dataset.id;
        // console.log(id);
        axios.get("/student/one", { params: { id } }).then(result => {
            console.log(result);
            if (result.data.code === 0) {
                const obj = result.data.data;

                for (const key in obj) {
                    // console.log(key);
                    // 根据key 去查找对应的dom元素
                    const target = document.querySelector(`#updateModal [name=${key}]`);
                    // 性别  单选框  特殊！！
                    if (key === "sex") {
                        // 根据 当前 性别的值 (obj.sex ) 找到 对应的 性别 单选框  让它选中
                        // 既要找到 name = sex 而且 value = obj.sex 标签
                        document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true;
                        // document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true;
                    }
                    if (key === "sex") {
                        // 根据 当前 性别的值 (obj.sex ) 找到 对应的 性别 单选框  让它选中
                        // 既要找到 name = sex 而且 value = obj.sex 标签
                        document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true;
                        continue; // 跳过下面的代码
                    }

                    // 贯籍  下拉框  特殊！！
                    // 分析一下：
                    // 1 下拉框 框中有省的信息  但没有市和县的信息   
                    //   那是因为市和县的信息 需要 相应的change事件触发    dom.innerHTML = html; 才执行  
                    // 2 省 是已经执行了的
                    // 3 所有需要在这里把 市和县主动初始化 并且添加默认值=obj[city]/obj[county]

                    renderSelect("/geo/city", { pname: obj.province }, document.querySelector('#updateModal [name=city]'), "市", obj.city);// 市 初始化
                    renderSelect("/geo/county", { pname: obj.province, cname: obj.city }, document.querySelector('#updateModal [name=county]'), "县", obj.county);// 县 初始化

                    // 当找到了这个dom元素 我们才可以设置  给普通的表单元素使用
                    if (target) {
                        target.value = obj[key];
                    }

                }
            }
        });
    } else if (dom.classList.contains('btn-danger')) {
        // 实现 删除功能
        // 获取 id
        const id = dom.dataset.id;
        console.log(id);
        // 发送请求
        if (confirm("您确定要删除吗？")) {
            axios.delete("/student/delete", { params: { id } }).then(result => {
                if (result.data.code === 0) {
                    getStudentList();
                }
            });
        }
    }
});
// 编辑学员 获取表单数据 实现编辑
document.querySelector('.update-form').addEventListener("submit", function (e) {
    e.preventDefault();
    // 快速获取表单数据
    const data = $(this).serialize();
    axios.put("/student/update", data).then(result => {
        console.log(result);
        if (result.data.code === 0) {
            // 重置表单
            this.reset();
            // 关闭模态框
            $('#updateModal').modal('hide');
            // 获取最新的数据
            getStudentList();
        }
    });
});





function getStudentList() {
    axios.get("/student/list").then(result => {
        // console.log(result);
        // 储存 数据
        const list = result.data.data;
        // console.table(list);
        // 页面渲染
        const html = list.reduce((h, v) => h + `
        <tr>
        <th scope="row">${v.id}</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.salary}</td>
        <td>${v.truesalary}</td>
        <td>${v.province}${v.city}${v.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id=${v.id}>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id=${v.id}>删除</button>
        </td>
      </tr>
        `, "");
        tbody.innerHTML = html;
    });
}
// 表单 籍贯下拉列表初始化 封装函数
function initSelect(select) {
    const provinceSelect = document.querySelector(`${select} [name="province"]`);// 省下拉框
    const citySelect = document.querySelector(`${select} [name="city"]`);// 市下拉框
    const countySelect = document.querySelector(`${select} [name="county"]`);// 县下拉框
    // 获取省份信息
    renderSelect("/geo/province", {}, provinceSelect, "省");
    // 获取市信息
    provinceSelect.addEventListener("change", function () {
        const pname = provinceSelect.value;
        renderSelect("/geo/city", { pname }, citySelect, "市");
    });
    // 获取县信息
    citySelect.addEventListener("change", function () {
        const pname = provinceSelect.value;
        const cname = citySelect.value;
        renderSelect("/geo/county", { pname, cname }, countySelect, "县");
    });

}
// 请求相应籍贯信息 封装函数 
function renderSelect(url, params, dom, lable, value = "") {
    axios.get(url, { params }).then(result => {
        // console.log(result);
        const list = result.data;
        // console.log(list);
        // 渲染数据
        const html = list.reduce((h, v) => h + `
        <option selected value="${v}">${v}</option>
        `, `<option selected value="">--${lable}--</option>`);

        dom.innerHTML = html;
        dom.value = value;

    });
}


/* // 添加学员 籍贯 省份等信息  (未封装的)
// 获取省份信息
axios.get("/geo/province").then(result => {
    // console.log(result);
    const list = result.data;
    // console.log(list);
    // 渲染数据
    const html = list.reduce((h, v) => h + `
    <option selected value="${v}">${v}</option>
    `, '<option selected value="">--省--</option>');

    provinceSelect.innerHTML = html;
    provinceSelect.value = '';

});
// 获取市信息
provinceSelect.addEventListener("change", function () {
    // console.log(provinceSelect.value);
    const pname = provinceSelect.value;
    axios.get("/geo/city", { params: { pname } }).then(result => {
        // console.log(result);
        const list = result.data;
        // console.log(list);
        // 渲染数据
        citySelect.innerHTML = list.reduce((h, v) => h + `
        <option selected value="${v}">${v}</option>
        `, '<option selected value="">--市--</option>');
        citySelect.value = '';
    })
});
// 获取县信息
citySelect.addEventListener("change", function () {
    // console.log(citySelect.value);
    const pname = provinceSelect.value;
    const cname = citySelect.value;
    axios.get("/geo/county", { params: { pname, cname } }).then(result => {
        // console.log(result);
        const list = result.data;
        // console.log(list);
        // 渲染数据
        countySelect.innerHTML = list.reduce((h, v) => h + `
        <option selected value="${v}">${v}</option>
        `, '<option selected value="">--县--</option>');
        countySelect.value = '';
    })
}); */